<template>
    <div v-show="bugList.length !== 0">
        <table border="1">
            <tr class="head">
                <th>全选 <input type="checkbox" :checked="checkedClkC" @click="checkedClk"></th>
                <th>bug信息</th>
                <th>操作</th>
            </tr>
            
        </table>
        <BufItem v-for="(buginfo,index) in bugList" :key="buginfo.id" :bug="buginfo" :delText="delText" :updateInputCallBack="updateInputCallBack" :clkCheckedCallBack="clkCheckedCallBack"></BufItem>
        <button class="btn-clean" @click="cleanBtn">清除已解决</button> bug总数{{bugList.length}}个,已解决{{yijin}}个
    </div>
</template>

<script>
    import BufItem from './BufItem.vue'
    export default {
        name: 'HelloWorldInputList',
        components: { BufItem },
        data() {
            return {
            };
        },
        props: ['bugList', 'delText', 'allChecked', 'cleanAll', 'clkCheckedCallBack', 'updateInputCallBack'],
        mounted() {

        },

        methods: {
            checkedClk(event) {
                this.allChecked(event.target.checked)
            },

            cleanBtn() {
                this.cleanAll()
            }
        },
        computed: {
            yijin() {
                let a = this.bugList.filter(item => {
                    return item.checked === true
                })
                return a.length
            },
            checkedClkC() {
                return this.bugList.length === this.yijin && this.bugList.length > 0
            }
        },
    };
</script>

<style scoped>
    table {
         width: 500px;
        text-align: center; 
    }

    .head {
        background-color: #038999;
    }

    .btn-del {
        background-color: #DD513F;
    }

    .btn-clean {
        background-color: #DD513F;
        color: aliceblue;
    }

    #tdM {
        cursor: pointer
    }
</style>